<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="5" :md="5" :lg="5" :xl="5">
      <Left/>
    </el-col>
    <el-col :xs="24" :sm="19" :md="19" :lg="19" :xl="19">
      <div class="right">
        <header>
          <span class="el-icon-user-solid" @click="showExitButton"></span>
          欢迎admin
          <span class="el-icon-caret-bottom"></span>
          <div @click="exit" class="exit" v-show="flag">退出登录</div>
        </header>
        <div class="bottom-container">
          <div class="wrapper">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>

// @ is an alias to /src
import BScroll from 'better-scroll'
import Left from '../components/home/Left';
export default {
  // name: "Home",
  data:()=>({
    flag:false
  }),
  components: {
    Left,
  },
  mounted(){
    new BScroll(".bottom-container", {})
  },
  methods:{
    showExitButton(){
        this.flag=true
    },
    exit(){
      window.sessionStorage.removeItem("username");
      this.$router.push("/login")
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/mixinScss.scss";
  .el-col{
    padding: 0!important;
    // @include Pd(0)
  }
  .right{
    height: 36.5rem;
    background: lightseagreen;
    header{
      @include SizeBack(100%,80px,white);
      @include FlexSpace();
      justify-content: flex-end;
      position: relative;
      // background: white;
      .el-icon-caret-bottom,
      .el-icon-user-solid
      {
        @include Margin(0,10px)
      };
    }
    .bottom-container{
      @include Size(100%,31.5rem);
      background: rgb(240, 240, 240);
      overflow: hidden;
    }
  }
  .exit{
    width: 150px;
    height: 50px;
    background: rgb(240,240,240,0.3);
    text-align: center;
    line-height: 50px;
    position: absolute;
    top: 50px;
  }
</style>
